<template>
  <el-card shadow="never">
    <template #header>
      <div style="display:flex;justify-content:space-between;align-items:center;">
        <span>门店订单</span>
      <el-radio-group v-model="statusFilter" size="small" @change="fetchOrders">
  <el-radio-button :label="0">全部</el-radio-button>
  <el-radio-button :label="1">待支付</el-radio-button>
  <el-radio-button :label="2">已支付</el-radio-button>
  <el-radio-button :label="4">已完成</el-radio-button>
  <el-radio-button :label="3">已取消</el-radio-button>
</el-radio-group>
      </div>
    </template>

    <!-- 表格 -->
    <el-table :data="orders" v-loading="loading" stripe>
      <el-table-column prop="id" label="订单号" width="80" />
      <el-table-column prop="userId" label="用户" width="80" />
      <el-table-column prop="totalPrice" label="金额(¥)" />
      <el-table-column prop="status" label="状态" width="80">
        <template #default="{ row }">
          <el-tag :type="statusTag(row.status)">
            {{ statusText(row.status) }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="createTime" label="下单时间" />
      <el-table-column label="操作" width="250">
        <template #default="{ row }">
          <div class="cell">
            <el-button size="small" @click="openDetail(row)">详情</el-button>
            <el-button
              size="small"
              type="success"
              :disabled="row.status !== 2"
              @click="finish(row.id)"
            >
              {{ row.status === 4 ? '已完成' : '完成' }}
            </el-button>
            <el-button
              size="small"
              type="danger"
              :disabled="row.status !== 1"
              @click="cancel(row.id)"
            >
              取消
            </el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <el-pagination
      v-model:currentPage="page"
      :page-size="size"
      layout="prev, pager, next"
      :total="total"
      @current-change="fetchOrders"
      style="margin-top: 16px; justify-content: center"
    />

    <!-- 详情抽屉 -->
    <el-drawer v-model="visible" title="订单详情" direction="rtl" size="400">
      <el-descriptions :column="1" border>
        <el-descriptions-item label="订单号">{{ detail.id }}</el-descriptions-item>
        <el-descriptions-item label="桌台">{{ detail.tableNumber || '-' }}</el-descriptions-item>
        <el-descriptions-item label="用户">{{ detail.userId }}</el-descriptions-item>
        <el-descriptions-item label="金额">¥{{ detail.totalPrice }}</el-descriptions-item>
        <el-descriptions-item label="状态">{{ statusText(detail.status) }}</el-descriptions-item>
        <el-descriptions-item label="下单时间">{{ detail.createTime }}</el-descriptions-item>
      </el-descriptions>

      <el-divider>明细</el-divider>
      <el-table :data="detail.items" stripe>
        <el-table-column prop="dishName" label="菜品" />
        <el-table-column prop="quantity" label="数量" width="60" />
        <el-table-column prop="price" label="单价(¥)" />
        <el-table-column label="小计(¥)">
          <template #default="{ row }">
            {{ (row.price * row.quantity).toFixed(2) }}
          </template>
        </el-table-column>
      </el-table>
    </el-drawer>
  </el-card>
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import axios from 'axios'

/* ================== 类型 ================== */
interface BizOrderItem {
  dishName: string
  quantity: number
  price: number
}

interface BizOrder {
  id: number
  userId: number
  storeId: number
  tableNumber?: string
  totalPrice: number
  status: 1 | 2 | 3 | 4        // 1待支付 2已支付 3已取消 4已完成
  createTime: string
  items: BizOrderItem[]
}

/* ================== 状态 ================== */
const orders = ref<BizOrder[]>([])
const detail = ref<BizOrder>({} as BizOrder)
const visible = ref(false)
const loading = ref(false)

const page = ref(1)
const size = ref(10)
const total = ref(0)
const storeId = 1
const statusFilter = ref<0 | 1 | 2 | 3 | 4>(2) // 0=全部

/* 状态文字 & 标签颜色 */
const statusText = (s: 1 | 2 | 3 | 4) =>
  ['', '待支付', '已支付', '已取消', '已完成'][s] ?? '未知'

const statusTag = (s: 1 | 2 | 3 | 4) =>
  ({ 1: 'warning', 2: '', 3: 'danger', 4: 'success' }[s] ?? 'info')

/* ================== 接口 ================== */
const fetchOrders = async () => {
  loading.value = true
  try {
    const { data } = await axios.get('/api/manager/order', {
      params: {
        storeId,
        page: page.value,
        size: size.value,
        /* 0 的时候不传，后台按全部查 */
        status: statusFilter.value || undefined
      }
    })
    orders.value = data.records
    total.value  = data.total
  } finally {
    loading.value = false
  }
}

onMounted(fetchOrders)

const openDetail = async (row: BizOrder) => {
  const { data } = await axios.get(`/api/manager/order/${row.id}`)
  detail.value = data
  visible.value = true
}

/* 完成订单 -> 状态 4 + 释放桌台 */
const finish = (id: number) => {
  axios.post(`/api/order/${id}/complete`)
    .then(() => {
      ElMessage.success('订单已完成，桌台已释放')
      fetchOrders()
    })
    .catch((e: any) => {
      ElMessage.error(e.response?.data?.message || '操作失败')
    })
}

/* 取消订单 -> 状态 3 + 释放桌台 */
const cancel = (id: number) => {
  axios.put(`/api/manager/order/${id}/status?status=3`)
    .then(() => {
      ElMessage.success('订单已取消')
      fetchOrders()
    })
    .catch((e: any) => {
      ElMessage.error(e.response?.data?.message || '操作失败')
    })
}

/* ================== 挂载 ================== */
onMounted(fetchOrders)
</script>

<style scoped>
/* 1. 全局卡片圆角 & 阴影 */
.el-card {
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .08);
}

/* 2. 表头磨砂质感 */
:deep(.el-table__header-wrapper) th {
  background: linear-gradient(135deg, #f5f7fa, #e4e7ed);
  color: #303133;
  font-weight: 600;
}

/* 3. 表格斑马纹淡化 */
:deep(.el-table--striped) .el-table__body tr.el-table__row--striped td {
  background: #fafbfc;
}

/* 4. 操作按钮组 */
.cell {
  display: flex;
  align-items: center;
  justify-content: space-between; /* 使按钮均匀分布 */
  gap: 5px; /* 调整按钮间的间距 */
}
.cell button {
  padding: 5px 10px; /* 调整按钮内边距 */
  border-radius: 15px; /* 减小按钮的圆角 */
  transition: transform 0.2s, box-shadow 0.2s; /* 添加过渡效果 */
  flex: 1; /* 使按钮占据相同空间 */
  text-align: center; /* 使按钮文本居中 */
}
.cell button:hover {
  transform: translateY(-2px); /* 按钮上移 */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 添加阴影 */
}

/* 5. 抽屉标题美化 */
:deep(.el-drawer__header) {
  margin-bottom: 0;
  padding: 16px 20px;
  background: #f5f7fa;
  font-size: 18px;
  font-weight: 600;
  border-bottom: 1px solid #ebeef5;
}

/* 6. 描述列表紧凑化 */
:deep(.el-descriptions__label) {
  width: 90px;
  justify-content: flex-end;
  color: #909399;
}

/* 7. 分页居中 & 圆角 */
.el-pagination {
  padding: 12px 0;
}
:deep(.el-pagination button),
:deep(.el-pagination .number) {
  border-radius: 6px;
}

/* 8. 暗黑模式适配（自动跟随系统） */
@media (prefers-color-scheme: dark) {
  .el-card {
    background: #1d1e1f;
    border-color: #4c4d4f;
  }

  :deep(.el-table__header-wrapper) th {
    background: linear-gradient(135deg, #2b2c2e, #1e1f20);
    color: #e5e5e5;
  }

  :deep(.el-table--striped) .el-table__row--striped td {
    background: #252627;
  }

  :deep(.el-drawer__header) {
    background: #2b2c2e;
    border-bottom-color: #4c4d4f;
  }
}

/* 9. 按钮统一样式 */
.cell .el-button {
  font-size: 14px; /* 统一字体大小 */
}

/* 10. 调整禁用按钮的样式 */
.el-button.is-disabled {
  background-color: #f0f0f0; /* 修改禁用按钮的背景色 */
  border-color: #dcdfe6; /* 修改边框颜色 */
  color: #c0c4cc; /* 修改文字颜色 */
  cursor: not-allowed; /* 修改鼠标样式 */
}
</style>